<template>
  <div>
    <div class="btn-box">
      <div class="jb">
        <span>{{ item.vipType }}</span>
      </div>
      <img class="images" :src="item.vipImg" alt="">
      <p class="money">{{ item.sellingPrice }}</p>
      <div class="content">
        {{ item.name }}
      </div>
      <div class="btn" @click="toBuyGoods(item)"><qq>BUY</qq></div>
    </div>
  </div>
</template>

<script>
  export default {
    props:['item'],
    methods:{
      toBuyGoods(item){
        console.log(item)
        this.$router.push({path:'/join',query:{uid:item.idw}}).catch(err=>{})
      }
    }
  }
</script>

<style scoped lang="scss">
  .btn-box{
    width: 167px;
    height: 186px;
    background: #FFFFFF;
    border-radius: 10px 10px 10px 10px;
    text-align: center;
    padding: 14px;
    box-sizing: border-box;
    position: relative;
    margin-top: 10px;
    .jb{
      position: absolute;
      width: 51px;
      height: 51px;
      left: 0px;
      top: 0;
      font-size: 12px;
      line-height: 1.6;
      text-align: center;
      color: #666666;
      background: #C5B1E7;
      border-top-left-radius: 10px;
      clip-path: polygon(100% 0, 0 100%, 0 0); /* 创建直角三角形 */
      span{
        display: flex;
        width: 51px;
        transform: rotate(-45deg);
        font-weight: 800;
        font-size: 18px;
        color: #533DF1;
        margin-top: -5px;
      }
    }

    .images{
      width: 60px;
      height: 60px;
      object-fit: cover;

    }
    .money{
      width: 100%;
      font-size: 22px;
      color: #533DF1;
      font-weight: 600  ;
    }
    .content{
      width: 100%;
      font-weight: 400;
      font-size: 12px;
      color: #5B6B86;
      line-height: 14px;
      text-align: center;
      font-style: normal;
      text-transform: none;
    }
    .btn{
      width: 143px;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 34px;
      background: linear-gradient( 90deg, #973DF1 0%, #5134C3 100%);
      box-shadow: 0px 4px 4px 0px rgba(92,18,187,0.25), inset 0px 4px 4px 0px rgba(249,249,249,0.25);
      border-radius: 30px 30px 30px 30px;
      font-weight: bold;
      font-size: 16px;
      margin-top: 10px;
      color: #FFFFFF;
    }
  }
</style>